<template>
    <div class="component-bottom-btn" @click="$emit('onclick')">
        <div class="btn" :class="{disable}">
            <template v-if="slot"><slot/></template>
            <template v-else="">{{text}}</template>
        </div>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-bottom-btn{
        position: fixed;
        z-index: 5;
        bottom: 0;
        width: 100%;
        height: 6rem;
        box-sizing: border-box;
        padding: .8rem 1rem;
        background-color: @color-white;

        .btn{
            height: 4.4rem;
            line-height: 4.4rem;
            font-size: 1.6rem;
            width: 100%;
            text-align: center;
            background-color: @app-color;
            color: @color-white;
            border-radius: .3rem;

            &.disable{
                background-color: @color-btn-disable;
            }
        }
    }
</style>

<script>
    export default {
        props: ['text', 'disable'],
        created(){
            console.log(this)
        },
        computed: {
            slot(){
                return this.$slots.default;
            }
        }

    }
</script>